<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clear:after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
        }
        /*心跳开始*/
        .anime1{
            margin-top: 20px;
            margin-left: 30px;
            float: left;
        }
        .anime1 img{
     /*animation:动画名称 花费时间 运动曲线  何时开始  播放次数  是否反方向;*/
            /*rt 的动画  每隔0.5s 执行动画 无限次*/
            animation: heart 0.8s ease infinite;
        }
        @keyframes heart {
            0% {
                transform:scale(1) ;
            }
            50%{
                transform:scale(1.1);
            }
            100%{
                transform:scale(1);
            }
        }
        /*心跳结束*/

        /*按键伸缩*/
        .anime2{
            float: left;
            margin-left: 50px;
        }
        .anime2 li{
            width: 20px;
            height: 20px;
            background-color: gold;
            list-style: none;
            margin: 3px;
            position: relative;
        }
        .anime2 div{
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: gold;
            top: 0;
            left: 0;
            transition: all 1s;
            z-index: -1;
        }
        .anime2 li:hover div{
            width: 100px;
        }
        /*按键伸缩*/
        /*阴影伸缩*/
        .anime3{
            float: left;
            width: 200px;
            height: 100px;
            margin-top: 20px;
            margin-left: 80px;
            border: 1px solid #cccccc;
            transition: all 1s;
        }
        .anime3:hover{
            box-shadow:0  10px 20px rgba(0,0,0,0.5);
            transform: translate(20px,20px);
        }
        /*阴影伸缩*/

        /*旋转的小球*/
        .anime4{
            float: left;
            margin-top: 20px;
            margin-left: 100px;
        }
        .anime4 img{
            animation: ball 0.8s linear  infinite normal;
        }
        @keyframes ball {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }
        /*旋转的小球结束*/

        /*旋转海贼王*/
        .anime5{
            margin-left: 200px;
            margin-top: 130px;
            position: relative;
            width: 150px;
            height: 150px;
            border: 1px solid #dddddd;
        }
        .anime5 img{
            width: 100%;
            height: auto;
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.8s;
            transform-origin: top right;
        }
        .anime5:hover img:first-child{
            transform: rotate(60deg);
        }
        .anime5:hover img:nth-child(2){
            transform: rotate(120deg);
        }
        .anime5:hover img:nth-child(3){
            transform: rotate(180deg);
        }
        .anime5:hover img:nth-child(4){
            transform: rotate(240deg);
        }
        .anime5:hover img:nth-child(5){
            transform: rotate(300deg);
        }
        .anime5:hover img:nth-child(6){
            transform: rotate(360deg);
        }
        /*旋转海贼王结束*/
    </style>
</head>
<body>

<div class="clear">
<div class="anime1">
    <img src="img/heart.png" alt="" width="100">
</div>
<div class="anime2">
    <ul>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>
</div>

<div class="anime3"></div>

<div class="anime4">
    <img src="img/ball.png" width="150" alt="">
</div>
</div>
<div class="anime5">
    <img src="img/lf.jpg" width="150" alt="">
    <img src="img/zl.jpg" width="150" alt="">
    <img src="img/qb.jpg" width="150" alt="">
    <img src="img/lb.jpg" width="150" alt="">
    <img src="img/wsb.jpg" width="150" alt="">
    <img src="img/nm.jpg" width="150" alt="">
</div>
</body>
</html>